<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Example Page</title>
	<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	<link href="layout-default-latest.css" rel="stylesheet">
	
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript" src="jquery.layout-latest.js"></script>
	<script type="text/javascript">
$(document).ready(function() {
var myLayout = $('body').layout({
west__size: "82"
,north__size: "28"
,resizable: true
,closable: false
,west__spacing_open: 0
,north__spacing_open: 0
,center__onresize: 'rightLayout.resizeAll'
,east__spacing_open: 0
,south__spacing_open: 0
,north__showOverflowOnHover: true
,east__showOverflowOnHover: true
,west__showOverflowOnHover: true
,east__size: "398"
,west__onresize:'rightLayout.resizeAll'
,east__onresize:'leftLayout.resizeAll'
});


var rightLayout = $('div.right-layout').layout({
north__paneSelector: ".right-top"
,north__spacing_open: 0
,north__size: "300"
,center__paneSelector: ".right-center"
});
var leftLayout = $('div.left-layout').layout({
north__paneSelector: ".left-top"
,center__paneSelector: ".left-center"
,closable: false
,north__size: "600"
});

 });
 </script>


	<script>
	$(function() {
		
		$( "#accordion" ).accordion();
		

		
		var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];
		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});
		

		
		$( "#button" ).button();
		$( "#radioset" ).buttonset();
		

		
		$( "#tabs" ).tabs();
		

		
		$( "#dialog" ).dialog({
			autoOpen: false,
			width: 400,
			buttons: [
				{
					text: "Ok",
					click: function() {
						$( this ).dialog( "close" );
					}
				},
				{
					text: "Cancel",
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});

		// Link to open the dialog
		$( "#dialog-link" ).click(function( event ) {
			$( "#dialog" ).dialog( "open" );
			event.preventDefault();
		});
		

		
		$( "#datepicker" ).datepicker({
			inline: true
		});
		

		
		$( "#slider" ).slider({
			range: true,
			values: [ 17, 67 ]
		});
		

		
		$( "#progressbar" ).progressbar({
			value: 20
		});
		

		// Hover states on the static widgets
		$( "#dialog-link, #icons li" ).hover(
			function() {
				$( this ).addClass( "ui-state-hover" );
			},
			function() {
				$( this ).removeClass( "ui-state-hover" );
			}
		);
	});
	</script>
	<style>
	body{
		font: 62.5% "Trebuchet MS", sans-serif;
		margin: 50px;
	}
	.demoHeaders {
		margin-top: 2em;
	}
	#dialog-link {
		padding: .4em 1em .4em 20px;
		text-decoration: none;
		position: relative;
	}
	#dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	#icons {
		margin: 0;
		padding: 0;
	}
	#icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: left;
		list-style: none;
	}
	#icons span.ui-icon {
		float: left;
		margin: 0 4px;
	}
	.fakewindowcontain .ui-widget-overlay {
		position: absolute;
	}
	</style>
</head>
<body>

<DIV class="ui-layout-center">
Outer-Center Pane
</DIV>
<DIV class="ui-layout-north">
Outer-North Pane
</DIV>
<DIV class="ui-layout-east right-layout">
<DIV class="right-top">
East Pane-> Inner-North Pane
</DIV>
<DIV class="right-center">
East Pane-> Inner-Center Pane
</DIV>
</DIV>
<DIV class="ui-layout-west left-layout">
<DIV class="left-top">
West Pane-> Inner-North Pane
</DIV>
<DIV class="left-center">
West Pane-> Inner-Center Pane
</DIV>
</DIV>


</body>
</html>
